<!-- student 学员管理 -->
<template>
  <div class="content">
    <el-form :model="query" ref="searchForm" label-width="100px" size="medium" class="search-form">
      <el-form-item label="选择日期：" prop="title">
        <TimeRangePicker v-model="query.timeRange" type="daterange" startPlaceholder="开始日期" endPlaceholder="结束日期"></TimeRangePicker>
      </el-form-item>

      <el-form-item label="" prop="realName" label-width="10px">
        <el-input class="input-with-select" :placeholder="'请输入' + querySelectPlaceholder" v-model="query.inputVal">
          <el-select v-model="querySelect" slot="prepend" @change="onSelctInputChange">
            <el-option v-for="item in querySelectList" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select v-model="query.status" placeholder="请选择状态" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="25px">
        <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
        <Cbutton type="info" size="medium" @click="handleReset('searchForm')">重置</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="realName" label="真实姓名" align="center" min-width="100"></el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" min-width="100"></el-table-column>
        <el-table-column prop="certCard" label="身份证号码" align="center" min-width="100"></el-table-column>
        <el-table-column prop="examinationId" label="试卷" align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.verbExamination.title || ''}}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" min-width="100">
          <template slot-scope="scope">
            {{dealStr(scope.row.status, 'examinationStatusList')}}
          </template>
        </el-table-column>
        <el-table-column prop="memberFinishTime" label="完成时间" align="center" min-width="160">
          <template slot-scope="scope">
            {{scope.row.memberFinishTime || scope.row.endTime | glbTimeFormat}}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" min-width="100">
          <template slot-scope="prop">
            <el-button v-if="prop.row.status === 2 || prop.row.status === 3" type="text" size="medium" @click="handleExamine(prop.row)">答卷审核</el-button>
          </template>
        </el-table-column>

      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>
  </div>
</template>

<script>
import { GetStudentExaminationList } from '@/api/train'
import { ExportList, ExportStr } from '@/utils'
import TimeRangePicker from '@/components/DatePicker/TimeRangePicker'
export default {
  name: 'Student',
  components: { TimeRangePicker },
  data () {
    return {
      querySelect: '1',
      querySelectPlaceholder: '真实姓名',
      querySelectList: [
        { value: '1', label: '真实姓名', keyName: 'realName' },
        { value: '2', label: '手机号码', keyName: 'phone' },
        { value: '3', label: '身份证号', keyName: 'certCard' }
      ],
      query: {
        timeRange: [],
        inputVal: '',
        realName: '',
        phone: '',
        certCard: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,
      typeList: [],
      statusList: ExportList('examinationStatusList')
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    onSelctInputChange (val) {
      this.querySelectList.forEach(item => {
        if (item.value === val) {
          this.querySelectPlaceholder = item.label
        }
      })
    },
    handleExamine (row) {
      this.$router.push({ name: 'train:student:examine', query: { id: row.id } })
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleReset (formName) {
      this.$refs[formName].resetFields()
    },
    getList () {
      let params = {}
      if (this.query.timeRange && this.query.timeRange.length > 1) {
        params.startTime = this.query.timeRange[0]
        params.endTime = this.query.timeRange[1]
      }
      // params.realName = this.query.realName
      params.status = this.query.status
      params.pageNum = this.query.pageNum
      params.pageSize = this.query.pageSize
      this.querySelectList.forEach(item => {
        if (item.value === this.querySelect) {
          params[item.keyName] = this.query.inputVal
        }
      })
      this.tableLoading = true
      GetStudentExaminationList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(e => {
        this.tableLoading = false
      })
    },
    dealStr (value, arrayKey) {
      const str = ExportStr(value, arrayKey)
      return str
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
